<template>
	<view class="member_center">
		<view class="member_center_top">
			<view class="member_center_title">
				<CustomNav navTitle="会员中心"></CustomNav>
			</view>
			<view class="member_center_inquire">
				<view class="member_center_inquire_date">
					<view class="member_center_inquire_startDate">
						请选择开始日期<image src="../../../static/image/datePullDown.png" mode=""></image>
					</view>
					<view class="member_center_inquire_endDate">
						请选择结束日期<image src="../../../static/image/datePullDown.png" mode=""></image>
					</view>
				</view>
				<view class="ember_center_inquire_query">
					查询
				</view>
			</view>
		</view>
		<view class="my_member_data">
			<view class="my_member_data_title">
				我的数据
			</view>
			<view class="my_member_data_tips">
				根据您的使用情况，累计您的使用数据！
			</view>
			<view class="my_member_data_list">
				<view class="my_member_data_listitem">
					<image src="../../../static/image/personalTradings.png" mode=""></image>
					<text class="my_member_data_item_name">个人交易（元）</text>
					<text class="my_member_data_item_money">¥100000.00</text>
				</view>
				<view class="my_member_data_listitem">
					<image src="../../../static/image/personalTradings.png" mode=""></image>
					<text class="my_member_data_item_name">个人交易（元）</text>
					<text class="my_member_data_item_money">¥100000.00</text>
				</view>
				<view class="my_member_data_listitem">
					<image src="../../../static/image/personalTradings.png" mode=""></image>
					<text class="my_member_data_item_name">个人交易（元）</text>
					<text class="my_member_data_item_money">¥100000.00</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import CustomNav from '../../../components/CustomNav/index.vue'
	export default {
		data() {
			return {
			}
		},
		methods: {
			// 返回上一页
			handleGoBack() {
				uni.navigateBack()
			}
		},
		components: {
			CustomNav
		},
		onLoad() {
		},
	}
</script>

<style lang="less" scoped>
	.member_center {
		.member_center_top {
			height: 557rpx;
			background: url(../../../static/image/memberBackgroundI.png) center;
			background-size: 100% 100%;
			.member_center_inquire_date {
				padding: 0 47rpx 50rpx 34rpx;
				display: flex;
				justify-content: space-between;
				view {
					font-size: 28rpx;
					color: #BBBBBB;
					text-align: center;
					border: 1px solid #A0A0A0;
					height: 78rpx;
					width: 325rpx;
					line-height: 78rpx;
					image {
						width: 22rpx;
						height: 13rpx;
						vertical-align: middle;
						margin-left: 28rpx;
					}
				}
				view:first-child {
					margin-right: 38rpx;
				}
			}
			.ember_center_inquire_query {
				margin: auto;
				width: 273rpx;
				height: 70rpx;
				font-size: 28rpx;
				text-align: center;
				line-height: 70rpx;
				color: #fff;
				background-color: #DBB87B;
				border-radius: 8rpx;
			}
		}
		.my_member_data {
			margin: -155rpx 24rpx 0;
			background-color: #FFFFFF;
			box-shadow: 0px 1px 25rpx 0px rgba(139, 139, 139, 0.4);
			border-radius: 15rpx;
			.my_member_data_title {
				font-size: 60rpx;
				color: #212121;
				font-weight: 500;
				padding: 36rpx 0 20rpx 34rpx;
			}
			.my_member_data_tips {
				color: #656565;
				font-size: 30rpx;
				padding-left: 34rpx;
			}
		}
		.my_member_data_list {
			padding: 0 50rpx 60rpx 55rpx;
			.my_member_data_listitem {
				padding-top: 100rpx;
				image {
					width:70rpx;
					height: 70rpx;
					margin-right: 36rpx;
					vertical-align: middle;
				}
				.my_member_data_item_name {
					font-size: 36rpx;
				}
				.my_member_data_item_money {
					float: right;
					line-height: 60rpx;
					font-weight: 500;
					color: #333;
				}
				text {
					color: #212121;
				}
			}
		}
		.my_member_data_listitem:first-child {
			padding-top: 58rpx;
		}
	}
</style>
